<template>
    <div class="deviceSafeRisk"></div>
</template>

<script>
export default {
    name: "deviceSafeRisk",
    data() {
        return {};
    },
    methods: {
        // 设备安全性风险
        setDeviceSafe() {
            let option = {
                title: [
                    {
                        text: "我国近十年GDP总量",
                        textStyle: {
                            color: "#fff",
                            fontSize: 12,
                        },
                        top: "4%",
                        left: "4%",
                    },
                    {
                        text: "中美两国人均GDP对比",
                        textStyle: {
                            color: "#fff",
                            fontSize: 12,
                        },
                        top: "4%",
                        left: "55%",
                    },
                ],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                legend: {
                    data: [
                        { name: "美国人均", icon: "circle" },
                        { name: "我国人均", icon: "circle" },
                    ],
                    gridIndex: 3,
                    orient: "vertical",
                    right: "44%",
                    bottom: "6%",
                    itemWidth: 7,
                    itemHeight: 7,
                    textStyle: {
                        color: "#00CCFF",
                        fontSize: 10,
                    },
                },
                grid: {
                    top: "15%",
                    left: "3%",
                    right: "50%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLine: { show: false },
                },
                yAxis: {
                    type: "category",
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        color: "#fff",
                        backgroundColor: "#A34FFA",
                        borderRadius: 3,
                        margin: 0,
                        padding: [1, 3, 1, 3],
                    },
                    inverse: true,
                    data: [
                        "2021",
                        "2020",
                        "2019",
                        "2018",
                        "2017",
                        "2016",
                        "2015",
                        "2014",
                        "2013",
                    ],
                },
                angleAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#172E6E",
                        },
                    },
                    startAngle: 135,
                    axisLabel: {
                        color: "#04E8EB",
                        fontSize: 10,
                    },
                    axisTick: { show: false },
                    data: ["2021", "2020", "2019", "2018"],
                    z: 10,
                },
                radiusAxis: {
                    splitLine: {
                        lineStyle: {
                            color: "#172E6E",
                        },
                    },
                    axisTick: { show: false },
                    axisLabel: { show: false },
                    axisLine: {
                        show: false,
                    },
                },
                polar: {
                    center: ["72%", "55%"],
                    radius: "65%",
                },
                series: [
                    {
                        name: "GDP总量",
                        type: "bar",
                        stack: "总量",
                        barWidth: 8,
                        itemStyle: {
                            color: "#5304EC",
                            barBorderRadius: [0, 8, 8, 0],
                        },
                        label: {
                            normal: {
                                show: false,

                                position: "insideRight",
                            },
                        },
                        data: [
                            177271, 147227, 142799, 138948, 123104, 112332, 110615, 104756,
                            95704,
                        ],
                    },
                    {
                        type: "bar",
                        data: [69287, 65279, 60109, 56856],
                        coordinateSystem: "polar",
                        name: "美国人均",
                        itemStyle: {
                            color: "#0AB9FE",
                        },
                        stack: "a",
                    },
                    {
                        type: "bar",
                        data: [12551, 10434, 9905, 8816],
                        coordinateSystem: "polar",
                        name: "我国人均",
                        itemStyle: {
                            color: {
                                // 颜色线性渐变
                                type: "linear",
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(104,18,147,1)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#1D2584", // 100% 处的颜色
                                    },
                                ],
                                globalCoord: false, // 缺省为 false
                            },
                        },
                        stack: "a",
                    },
                ],
            };
            let myChart = this.$echarts(this.$el);

            myChart.clear();
            myChart.resize();
            myChart.setOption(option);
        },
    },
    mounted() {
        this.setDeviceSafe();
    },
};
</script>

<style lang="less" scoped>
.deviceSafeRisk {
    height: 100%;
}
</style>
